.collapse-card {
  background-color: $white;
  border-bottom: 1px solid $light-gray;
  color: $mid-gray;
  @include transition(.4s);

  * {
    @include border-box();
  }

  &.active {
    @include raise-2;
    margin: 1rem -1rem;

    .collapse-card__heading:hover {
      &::after {
        content: "\f066"; // compress icon
      }
    }
  }

  .collapse-card__heading:hover {
    &::after {
      content: "\f065"; // expand icon
    }
  }
}

.collapse-card__heading {
  cursor: pointer;
  @include cf;
  padding: 1rem;
  position: relative;

  i {
    float: left;
  }

  &::after {
    color: $text-color;
    font-family: 'FontAwesome';
    font-size: 1rem;
    line-height: 2rem;
    padding-left: .4rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
  }
}

.collapse-card__title {
  font-size: 1rem;
  line-height: 2rem;
  margin: 0 2rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collapse-card__body {
  padding: 1rem;
  display: none;
}